<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li{
        list-style: none;
        border: 1px solid #111;
        /* width: 10%; */
    /* height: 100%; */
    width: 100px;
    height: 40px;
    float: left;
    margin-left: 1%;
    background: cadetblue;
    font-size: 20px;
    text-align: center;
    line-height: 2;
    /* : ; */
    }
    ul{
        width: 40px;
        height: 60px;
        /* display: flex; */
        display: none;
        /* display: block; */
    }
</style>
<body>
    <button onclick="goto()">输入法</button>
    <div>
        <ul id="box" >
            <li onmouseover="ys()" onmouseout="yc()" id="li">简写</li>
            <li onmouseover="ys1()" onmouseout="yc1()" id="li1">拼写</li>
            <li onmouseover="ys2()" onmouseout="yc2()" id="li2">关闭</li>
        </ul>
    </div>
</body>
<script>
    function goto(){
        var x=document.getElementById('box').style.display="block"
        // console.log(111);
    }
    // var lis = document.querySelectorAll("ul li")
    function ys(){
        var d=document.getElementById('li').style.backgroundColor="red"
    }
    function ys1(){
        var d=document.getElementById('li1').style.backgroundColor="red"
    }
    function ys2(){
        var d=document.getElementById('li2').style.backgroundColor="red"
    }
    function yc(){
        var d=document.getElementById('li').style.backgroundColor="cadetblue"
    }
    function yc1(){
        var d=document.getElementById('li1').style.backgroundColor="cadetblue"
    }
    function yc2(){
        var d=document.getElementById('li2').style.backgroundColor="cadetblue"
    }
</script>
</html>